<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>存储配置</title>
    <link rel="stylesheet" href="{__CSS__}/element_ui.css"/>
    <link rel="stylesheet" href="{__CSS__}/style.css"/>
    <script src="{__JS__}/vue2.js"></script>
    <script src="{__JS__}/element_ui.js"></script>
    <script src="{__JS__}/axios.min.js"></script>
    <script src="{__JS__}/request.js"></script>
</head>
<body>
<div id="app">
    <div class="app-loading" v-if="pageLoading">
        <div class="app-loading__logo">
            <img src="{__IMG__}/logo.png"/>
        </div>
        <div class="app-loading__loader"></div>
        <div class="app-loading__title">{$title}</div>
    </div>
    <el-card class="box-card" v-else>
        <div slot="header" class="clearfix">
            <span>存储配置</span>
        </div>
        <el-tabs v-model="activeName">
            <el-tab-pane label="默认开启引擎" name="first">
                <el-form ref="form" :model="baseForm" label-width="80px">
                    <el-form-item label="默认引擎">
                        <el-radio label="local" v-model="baseForm.store_way">本地存储</el-radio>
                        <el-radio label="aliyun" v-model="baseForm.store_way">阿里云OSS</el-radio>
                        <el-radio label="qcloud" v-model="baseForm.store_way">腾讯云COS</el-radio>
                        <el-radio label="qiniu" v-model="baseForm.store_way">七牛云KODO</el-radio>
                    </el-form-item>
                    <el-form-item style="margin-top: 50px;">
                        <el-button type="primary" @click="baseSubmit" style="width: 200px;">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="阿里云OSS" name="second">
                <el-form ref="form" :model="aliform" :label-position="labelPosition" label-width="160px">
                    <el-form-item label="空间域名 Domain" style="width:700px">
                        <el-input v-model="aliform.oss_domain"></el-input>
                    </el-form-item>
                    <el-form-item label="AccessKey ID" style="width:700px">
                        <el-input v-model="aliform.accesskey_id"></el-input>
                    </el-form-item>
                    <el-form-item label="AccessKey Secret" style="width:700px">
                        <el-input v-model="aliform.accesskey_secret"></el-input>
                    </el-form-item>
                    <el-form-item label="Bucket" style="width:700px">
                        <el-input v-model="aliform.bucket"></el-input>
                    </el-form-item>
                    <el-form-item label="Endpoint" style="width:700px">
                        <el-input v-model="aliform.endpoint"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-top: 50px;">
                        <el-button type="primary" @click="aliSubmit" style="width: 200px;">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="腾讯云COS" name="third">
                <el-form ref="form" :model="qcloudform" :label-position="labelPosition" label-width="160px">
                    <el-form-item label="腾讯云APPID" style="width:700px">
                        <el-input v-model="qcloudform.tencent_appid"></el-input>
                    </el-form-item>
                    <el-form-item label="空间域名 Domain" style="width:700px">
                        <el-input v-model="qcloudform.tencent_domain"></el-input>
                    </el-form-item>
                    <el-form-item label="SecretId" style="width:700px">
                        <el-input v-model="qcloudform.secret_id"></el-input>
                    </el-form-item>
                    <el-form-item label="SecretKey" style="width:700px">
                        <el-input v-model="qcloudform.secret_key"></el-input>
                    </el-form-item>
                    <el-form-item label="存储桶名称" style="width:700px">
                        <el-input v-model="qcloudform.tencent_bucket"></el-input>
                    </el-form-item>
                    <el-form-item label="所属地域" style="width:700px">
                        <el-input v-model="qcloudform.tencent_endpoint"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-top: 50px;">
                        <el-button type="primary" @click="qcloudSubmit" style="width: 200px;">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="七牛云KODO" name="fourth">
                <el-form ref="form" :model="qiniuform" :label-position="labelPosition" label-width="160px">
                    <el-form-item label="空间域名 Domain" style="width:700px">
                        <el-input v-model="qiniuform.qiniu_domain"></el-input>
                    </el-form-item>
                    <el-form-item label="accessKey" style="width:700px">
                        <el-input v-model="qiniuform.accesskey"></el-input>
                    </el-form-item>
                    <el-form-item label="secretKey" style="width:700px">
                        <el-input v-model="qiniuform.secretkey"></el-input>
                    </el-form-item>
                    <el-form-item label="空间名称" style="width:700px">
                        <el-input v-model="qiniuform.qiniu_bucket"></el-input>
                    </el-form-item>
                    <el-form-item label="存储区域" style="width:700px">
                        <el-input v-model="qiniuform.qiniu_endpoint"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-top: 50px;">
                        <el-button type="primary" @click="qiniuSubmit" style="width: 200px;">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </el-card>
</div>

<script>

    new Vue({
        el: '#app',
        data: function () {
            return {
                pageLoading: true,
                baseIndex: '/{:config("shop.backend_index")}/',
                labelPosition: 'right',
                activeName: 'first',
                baseForm: {},
                aliform: {},
                qcloudform: {},
                qiniuform: {},
                form: {}
            }
        },
        mounted() {
            this.pageLoading = false
            this.getBaseInfo()
        },
        methods: {
            async getBaseInfo() {
                let res = await request.get(this.baseIndex + 'system/store')
                this.baseForm = res.data.store
                this.aliform = res.data.aliyun
                this.qcloudform = res.data.qcloud
                this.qiniuform = res.data.qiniu
            },
            baseSubmit() {
                this.form = this.baseForm
                this.doSubmit()
            },
            aliSubmit() {
                this.form = this.aliform
                this.doSubmit()
            },
            qcloudSubmit() {
                this.form = this.qcloudform
                this.doSubmit()
            },
            qiniuSubmit() {
                this.form = this.qiniuform
                this.doSubmit()
            },
            async doSubmit() {
                let res = await request.post(this.baseIndex + 'system/store', this.form)
                if (res.code == 0) {
                    this.$message.success(res.msg)
                } else {
                    this.$message.error(res.msg)
                }
            }
        }
    })
</script>
</body>
</html>